<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap 表格</title>
  <meta charset="utf-8">
  <!-- 适应移动设备 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./jquery-3.5.1.min.js"></script>
  <script src="./js/bootstrap.js"></script>
</head>

<body>
  <div class="container">
    <p style="text-align: center;">基础表格</p>
    <table class="table table-striped table-bordered table-hover table-condensed">
      <thead>
        <tr>
          <th>序号</th>
          <th>名字</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td>1</td>
          <td>宋书航</td>
        </tr>
        <tr class="success">
          <td>2</td>
          <td>白</td>
        </tr>
        <tr>
          <td>3</td>
          <td>阿十六</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="container table-responsive">
    <p style="text-align: center;">响应式表格</p>
    <table class="table table-striped table-bordered table-hover table-condensed">
      <thead>
        <tr>
          <th>序号</th>
          <th>名字</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td>1</td>
          <td>宋书航</td>
        </tr>
        <tr class="success">
          <td>2</td>
          <td>白</td>
        </tr>
        <tr>
          <td>3</td>
          <td>阿十六</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="container">
    <div class="table-responsive">
      <!-- striped：条纹  bordered：边框 -->
      <table class="table table-striped table-bordered table-hover table-condensed">
        <caption>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</caption>
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Street</th>
          </tr>
        </thead>
        <tbody>
          <tr class="danger">
            <td>1</td>
            <td id="test">Anna Awesome</td>
            <td>Broome Street</td>
          </tr>
          <tr class="info">
            <td>2</td>
            <td>Debbie Dallas</td>
            <td>Houston Street</td>
          </tr>
          <tr class="info">
            <td>3</td>
            <td>John Doe</td>
            <td>Madison Street</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
<script>
  window.onload = function () {
    setInterval(function () {
      document.getElementById('test').innerHTML = Math.ceil(Math.random() * 10);
    }, 3000);
  }
</script>

</html>